<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/3/13
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
  <meta charset="UTF-8">
  <title>修改商品</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/global.css"/>

  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/header.css"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font_1613397_3cmr5ide1fe.css"/>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/MicroLoader.css"/>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/Header.a3dc4fd1.chunk.css"/>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/smart-category-qn.css"/>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/app.85fbbb1e.css"/>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.3.min.js"></script>
  <style>
    .bigZoom {
      zoom: 250%;
    }
    .goodsVal{
      margin: auto;
      margin-right: 30px;
      margin-top: 20px;
    }
    #root{
      margin-top: 100px;
      margin-bottom: 100px;
    }
    .addTag{
      z-index: 9;
      position: fixed;
      width: 630px;
      border-radius: 16px;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .addTag .el-form-item__content{
      margin-left: 15%;
      margin-bottom: 20px;
    }
    .addTag .el-input{
      display: block;
      width: 60%;
    }
    button {
      outline: none !important;
      border: none;
      background: transparent;
      margin-right: 5%;
      cursor:pointer;
    }
    .tagName{
      font-size: 16px;
      margin-bottom: 10px;
    }
    #goodsSku{
      padding-top: 20px;
    }
  </style>

</head>

<body>
<div id="qn_header">
  <div class="Header_container__FuAZ2">
    <div class="Header_wrap__5vUYw">
      <div class="Header_left__V+n7k">
        <!--img src="" alt="">-->
        <a href="${pageContext.request.contextPath}/con/show.html?id=${Bus.id}&osid=5">
          <svg t="1678418644500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2789" width="30" height="30">
            <path d="M891.18208 499.97824 529.1008 134.10944c-8.032-8.1152-20.864-8.14976-28.93568-0.0768L354.14528 280.05632 354.14528 243.3024c0-11.82336-9.28384-21.408-20.73856-21.408s-20.73856 9.58464-20.73856 21.408l0 78.2336L134.30784 499.90016c-4.07296 4.07424-6.35008 9.68832-6.30784 15.54176 0.04352 5.85344 2.4064 11.43296 6.53952 15.44064l101.0304 97.95968 0.92672 245.93152c0.04352 11.79136 9.31584 21.3248 20.73856 21.3248l509.33888 0c11.45344 0 20.73856-9.58464 20.73856-21.408L787.31264 628.96l103.38304-97.90592c4.19584-3.9744 6.62528-9.55392 6.71744-15.43168C897.50528 509.74592 895.2512 504.0896 891.18208 499.97824zM752.55296 603.77088c-4.2816 4.05376-6.71872 9.77664-6.71872 15.77472l0 233.73312-467.9424 0-0.87936-233.81632c-0.02304-5.88288-2.3872-11.4944-6.53952-15.52256l-91.68896-88.90496L514.5216 179.28832l332.01024 335.48416L752.55296 603.77088z" p-id="2790"></path>
          </svg>
        </a>
        <div class="Header_divider__ixxgl"></div>
        <div class="Header_title__vxt4F">修改商品</div>
      </div>
      <div class="Header_middle__J5g+F"></div>
      <div class="Header_right__FSYrj">
        <div class="CustomerService_Container__gk40G">
          <div class="CustomerService_BtnContainer__M-m7G">
            <div class="CustomerService_BtnIcon__ZocTl">
            </div>
            <div>帮助</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="root">
  <div class="next-loading sell-block-qn" id="card-block">
    <div class="next-loading-wrap">
      <div class="content">
        <form id="goodsData" method="post">
          <div id="goods">
            <span class="goodsVal">
                <span style="font-size: 16px;">商品id:</span>
                <span class="next-input next-medium">
                    <input name="goodsId" readonly="readonly" maxlength="200" height="100%" type="text" step="0.01"  value="${goods.goodsId}">
                </span>
            </span>
            <span class="goodsVal">
                <span style="font-size: 16px;">商品名称:</span>
                <span class="next-input next-medium" >
                    <input name="goodsName" placeholder="商品名称" maxlength="200" height="100%" type="text" step="0.01"  value="${goods.goodsName}">
                    <input name="oldGoodsName" value="${goods.goodsName}" hidden >
                </span>
            </span><br />
            <div class="goodsVal">
              <h3>商品描述:</h3>
              <span class="next-input next-medium sell-o-input sell-input large-input">
                  <input name="desc" placeholder="商品描述" maxlength="200" height="100%" type="text" step="0.01"  value="${goods.desc}">
              </span>
            </div><br />
            <div class="goodsVal">
              <h3>关键字:</h3>
              <span class="next-input next-medium sell-o-input sell-input large-input">
                  <input name="keywords" placeholder="关键字" maxlength="200" height="100%" type="text" step="0.01"  value="${goods.keywords}">
              </span>
            </div>
            <div>
                <span style="float: right;margin-bottom: 20px;margin-top: 10px;">
                    <input class="next-btn next-large next-btn-primary" onclick="modifyGoods()" type="button" value="修改商品基础信息"/>
                </span>
            </div>
          </div>
        </form>
        <div class="sell-qn-vertical-layout-info"></div>
      </div>
    </div>
  </div>
  <div class="next-loading sell-block-qn" id="card-block">
      <div class="next-loading-wrap">
        <div class="content">
          <div id="goodsImg">
            <label>
              <span style="font-size: 18px;">商品图片</span>
            </label>
            <hr/>
            <div>
              <h3>商品主图</h3>
              <div  style="padding-left: 15px" data-classsify="0" id="goodsMainImg">
                <div  class="drag-image-item-wrapper addHtmlImg" draggable="true">
                  <div class="sell-o-image-item" style="width: 50px; height: 100px;">
                    <div class="">
                      <div class="upload-content">
                        <i class="next-icon next-icon-add next-large upload-btn-icon"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sell-qn-vertical-layout-info"></div>
            <hr>
            <div>
              <h3>商品介绍图</h3>
              <div  style="padding-left: 15px" data-classsify="1" id="goodsDescImg">
                <div class="drag-image-item-wrapper addHtmlImg" draggable="true">
                  <div class="sell-o-image-item" style="width: 50px; height: 100px;">
                    <div class="">
                      <div class="upload-content">
                        <i class="next-icon next-icon-add next-large upload-btn-icon"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <div class="sell-qn-vertical-layout-info"></div>
        <hr />
        <div id="goodsSku">
          <label>
            <span style="font-size: 18px;">商品Sku:</span>
          </label>
          <div id="SkuList">

          </div>
          <button onclick="opAdd()" style="float: right;">
            <i class="next-icon next-icon-add bigZoom"></i>
          </button>
        </div>
        <div class="sell-qn-vertical-layout-info"></div>
      </div>
    </div>
  </div>
</div>
<%--添加Sku--%>
<div class="el-dialog addTag" style="margin-top: 15vh;display: none;">
  <div class="el-dialog__header">
    <span class="el-dialog__title">添加商品SKU</span>
    <button type="button" aria-label="Close" onclick="closeAdd()" class="el-dialog__headerbtn">
      <i class="next-icon next-icon-minus " style="zoom: 150%"></i>
    </button>
  </div>
  <hr />
  <div class="el-dialog__body">
    <div class="detail">
      <form method="post" id="skuAdd" class="el-form el-form--label-right">
          <input name="goodsID" value="${goods.goodsId}" hidden>
         <input name="goodsName" value="${goods.goodsName}" hidden>
        <div class="form-data">
          <div class="tagName">

          </div>
          <div class="TypeToTag">

          </div>
          <div class="el-form-item is-required sku-val">
            <label  class="el-form-item__label" style="width: 15%;">价格</label>
            <div class="el-form-item__content" >
              <div class="el-input">
                <input name="pric" placeholder="0" oninput="if(value>2147483640)value=2147483640;if(value<0)value=0" height="100%" type="number" step="1.01" class="el-input__inner">
              </div>
            </div>
            <label class="el-form-item__label" style="width: 15%;">数量</label>
            <div class="el-form-item__content" >
              <div class="el-input">
                <input name="num" placeholder="0" oninput="if(value>2147483640)value=2147483640;if(value<0)value=0" height="100%" type="number" class="el-input__inner">
              </div>
            </div>
          </div>
          <div style="z-index: 1; height: 50px;">
            <div class="sub-navbar" style="z-index: 1; height: 50px;">
              <button type="button" onclick="submitSku()" class="el-button el-button--success" style="margin-left: 10px;">
                <span>添加</span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>



<script>
  function modifyGoods(){
    $.ajax({
      url:"modifyGoods.do",
      async:false,
      data: $("#goodsData").serialize(),
      dataType:"text",
      success:function (data) {
        alert(data);
        if(data=="修改成功"){
          $("#goodsData input[name='oldGoodsName']").val($("#goodsData input[name='goodsName']").val())
          $("#skuAdd input[name='goodsName']").val($("#goodsData input[name='goodsName']").val())
          upSku();
        }
      },
      error:function (){
        alert("异常操作")
      }
    })
  }
  var imgList;
  function queryImgByGoodsId(){
    $.ajax({
      url:"queryImgByGoodsId.do",
      async:false,
      data: {goodsId:$("input[name='goodsId']").val()},
      dataType:"json",
      success:function (data) {
          imgList=data
      },
      error:function (){
        alert("异常操作")
      }
    })
    for (let i = 0; i < imgList.length; i++) {
      let str='<div class="drag-image-item-wrapper" draggable="true">' +
              '<div class="sell-o-image-item  has-url"" style="width: 100px; height: 100px;">' +
              '<p class="placeholder"></p>' +
              '<div class="image-upload-btn" >' +
              '<div class="upload-content">' +
              '<i class="next-icon next-icon-add next-large upload-btn-icon"></i>' +
              '<p class="upload-text">添加上传图片</p>' +
              '</div>' +
              '<input name="PHtmlImg" accept="image/*" type="file" hidden="hidden"class="loadimg"/>' +
              '</div>' +
              '<div class="sell-o-image-item-preview">' +
              '<div class="image-card">' +
              '<img src="${pageContext.request.contextPath}/img/'+imgList[i].img_url+'" alt="url" />' +
              '</div>' +
              '<div class="image-tools">' +
              '<i class="next-icon next-iconcarousel-arrcarousel-arrow-left-enter next-small tool move-left"></i>' +
              '<i data-imgid="'+imgList[i].img_id+'" class="next-icon next-icon-ashbin next-small tool image-upload-remove" ></i>' +
              '</div>' +
              '</div>' +
              ' </div>';
        if(imgList[i].img_classify==0){
            $("#goodsMainImg").prepend(str);
        }else{
            $("#goodsDescImg").prepend(str);
        }
    }
  }
  queryImgByGoodsId()
</script>



<script>
  //上传图片
  $(".image-upload-btn").click(imgbtn);
  function imgbtn () {
    var t = $(this).next();
    if (t.find(".image-card").length == 0) {
      var str = '<div class="image-card"><img src="" alt="url" /></div>';
      t.html(str + t.html());
      t.parent().addClass("has-url")
      var img = $(this).children(".loadimg");
      t.find(".image-upload-remove").click(reImg);
      img.click();
    }
  }
  $(".image-upload-remove").click(reImg)
  function reImg(){
    if(confirm("删除操作不可逆，是否删除")){
      let t=$(this);
      if(t.data("imgid")!=null){
        $.ajax({
          url:"delImg.do",
          async:false,
          data: {imgid:t.data("imgid")},
          dataType:"text",
          success:function (data) {
            alert(data)
          },
          error:function (){
            alert("异常")
          }
        })
      }
      t.parent().parent().parent().parent().remove();
    }
    //服务器删除数据并删除图片
  }

  $('.loadimg').change(loadImgChang)
  function loadImgChang () {
    var t=$(this);
    var file = t.get(0).files[0];
    var fdata=new FormData();
    fdata.append("pimg",file)
    fdata.append("classify",t.parent().parent().parent().parent().data("classsify"))
    fdata.append("goodsId",$("input[name='goodsId']").val())
    if(file!=null){
      $.ajax({
        type:"post",
        url:"addOneImg.do",
        async:false,
        data:fdata,
        processData:false,//数据不做处理
        contentType:false,//不要设置content-Type请求头
        cache:false,
        dataType:"json",
        success:function (data) {
          t.parent().next().find(".image-upload-remove").data("imgid",data.img_id);
          t.parent().next().find("img").attr("src","${pageContext.request.contextPath}/img/"+data.img_url);
        },

      })
    }
    //上传图片数据及数据库图片URL收集
  }

  $('.addHtmlImg').click(function (){
    let str='<div class="drag-image-item-wrapper" draggable="true">' +
            '<div class="sell-o-image-item" style="width: 100px; height: 100px;">' +
            '<p class="placeholder"></p>' +
            '<div class="image-upload-btn" >' +
            '<div class="upload-content">' +
            '<i class="next-icon next-icon-add next-large upload-btn-icon"></i>' +
            '<p class="upload-text">添加上传图片</p>' +
            '</div>' +
            '<input name="PHtmlImg" accept="image/*" type="file" hidden="hidden"class="loadimg"/>' +
            '</div>' +
            '<div class="sell-o-image-item-preview">' +
            '<div class="image-tools">' +
            '<i class="next-icon next-iconcarousel-arrcarousel-arrow-left-enter next-small tool move-left"></i>' +
            '<i class="next-icon next-icon-ashbin next-small tool image-upload-remove" ></i>' +
            '</div>' +
            '</div>' +
            ' </div>';
    $(this).parent().prepend(str);
    $(".image-upload-btn").click(imgbtn);
    $('.loadimg').change(loadImgChang)
  })
</script>


<script>
  //SKU
  var goodsType="${goods.type}"
  var tagList
  $.ajax({
    url:"queryAttrByTyppe.do",
    async:false,
    data: {type:goodsType},
    dataType:"json",
    success:function (data) {
      tagList=data;
      addTagName()
    },
    error:function (){
      alert("异常操作")
    }

  })

  var skuList;

  function closeAdd(){
    $(".TypeToTag").children().remove();
    $("#skuAdd .sku-val input").val(0);
    addTagName();
    $(".addTag").css("display","none");
  }
  function opAdd(){
    $(".addTag").css("display","block");
  }
  upSku();
  function upSku(){
    $.ajax({
      url:"querySku.do",
      async:false,
      data: {goodsId:$("input[name='goodsId']").val()},
      dataType:"json",
      success:function (data) {
        skuList=data;
      },
      error:function (){
        alert("异常操作")
      }
    })
    let str='';
    for (let i = 0; i < skuList.length; i++) {
      str+='<div class="goodsVal">' +
              '<span style="font-size: 16px;">'+skuList[i].sku_name+'：</span>' +
              '<span style="font-size: 12px;">价格:</span>' +
              '<span class="next-input next-medium ">' +
              '<input name="price" value="'+skuList[i].pric+'" maxlength="3" height="100%" type="number" oninput="if(value>2147483640)value=2147483640;if(value<0)value=0" step="0.01">' +
              '</span>' +
              '<span style="font-size: 12px;">数量:</span>' +
              '<span class="next-input next-medium ">' +
              '<input name="num" value="'+skuList[i].num+'" oninput="if(value>2147483640)value=2147483640;if(value<0)value=0" height="100%" type="number" >' +
              '</span>' +
              '<button data-skuid="'+skuList[i].skuId+'" onclick="modifySku(this)">' +
              '<i style="color: #1cc4af" class="next-icon next-icon-check bigZoom"></i>' +
              '</button>'+
              '<button data-skuid="'+skuList[i].skuId+'" onclick="reSku(this)">' +
              '<i class="next-icon next-icon-ashbin bigZoom"></i>' +
              '</button>' +
              '</div>'
    }
    $("#SkuList").html(str)
  }
  function reSku(obj){
    if(confirm("删除操作不可逆，是否删除")){
      let t=$(obj);
      if(t.data("skuid")!=null){
        $.ajax({
          url:"delSku.do",
          async:false,
          data: {skuid:t.data("skuid")},
          dataType:"text",
          success:function (data) {
            alert(data)
          },
          error:function (){
            alert("异常")
          }
        })
      }
      $(obj).parent().remove();
    }
  }
  function modifySku(obj){
    var f=$(obj).parent();
    var skuid=$(obj).data("skuid");
    $.ajax({
      url:"modifySku.do",
      async:false,
      data: {skuid:skuid,price:f.find("input[name='price']").val(),num:f.find("input[name='num']").val()},
      dataType:"text",
      success:function (data) {
        alert(data);
      },
      error:function (){
        alert("异常操作")
      }
    })
  }
  function addTagName(){
    let str="";
    for (let i = 0; i < tagList.length; i++) {
      str+='<a data-attid="'+tagList[i].attrNameId+'"onclick="addTag(this)">'+tagList[i].attrName+'</a>&nbsp;';
    }
    $(".tagName").html(str)
  }
  function addTag(obj){
    let t=$(obj);
    let index=t.data('attid');
    console.log(t.data('attid'));
    $.ajax({
      url:"queryAttrval.do",
      async:false,
      data: {attrId:index},
      dataType:"json",
      success:function (data) {
        t.remove();
        if(data.length<=0)return;
        let tegval='';
        tegval+='<div style="margin-bottom: 10px" id="tagvale"><input type="checkbox" value="'+index+'" checked="checked" name="tag" hidden ><span class="radio-item">'+t.text()+': <label>'
        for (let i = 0; i < data.length; i++) {
          tegval+='<input name="'+index+'" value="'+data[i].attr_value_id+'" type="radio" onchange="cboxchoen(this)" class="bigZoom"/>' +
                  '<input name="'+index+'valName" value="'+data[i].attr_value+'" type="radio" class="bigZoom" hidden/>'+
                  '<span class="item-label">'+data[i].attr_value+'</span>'
        }
        tegval+='</label></span>'
        // tegval+='<i class="next-icon next-icon-add next-large upload-btn-icon"></i>'
        //==============添加额外标签 另做===============
        tegval+='</div>'
        $(".TypeToTag").append(tegval)

      },
      error:function (){
        alert("失败")
      }
    })
  }
  function cboxchoen(obj){
    $(obj).next("input").get(0).checked=obj.checked;
  }
  function submitSku(){
      $.ajax({
          url:"addOneSku.do",
          async:false,
          data: $("#skuAdd").serialize(),
          dataType:"text",
          success:function (data) {
              alert(data);
          },
          error:function (){
              alert("异常操作")
          }
      })
    $(".TypeToTag").children().remove();
    $("#skuAdd .sku-val input").val(0);
    addTagName();
    upSku();
  }
</script>
</body>

</html>
